<style lang="less" scoped>
.bottomType {
    width: 100%;
    position: fixed;
    bottom: 0;
    margin: 0 auto;
    z-index: 10;
    background-color: #f8f8f8;
    border-top: 0.05rem solid #ddd;
    height: 1.17rem;
}
.bottomInput {
    width: 5.79rem;
    height: 0.81rem;
    line-height: 0.81rem;
    float: left;
    margin-top: 0.16rem;
    margin-left: 0.35rem;
    background-color: #FDFDFD;
    border:solid 0.03rem #eee;
    resize: none;
    text-indent: .2rem;
    font-size: 0.35rem;
    color:#666;
}

.bottomGift, .bottomLy, .bottomShare,.xnGift {
    width: 0.53rem;
    height: 0.48rem;
    float: left;
    margin-top: 0.35rem;
}
.bottomGift {
    margin-left: 0.48rem;
}
.xnGift {
    margin-left: 0.72rem;
}
.bottomLy, .bottomShare {
    margin-left: 0.72rem;
}
.bottomGift > img, .bottomLy > img, .bottomShare > img ,.xnGift>img{
    width: 100%;
    height: 100%;
}
.bottomTypeAfter {
    width: 100%;
    position:fixed;
    margin: 0 auto;
    height:100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow-y: hidden;
    z-index: 20;
    left: 0;
    bottom: 0;
    overflow: hidden;
}
.bottomTypeAfterios{
    bottom:0
}
.bottomTypeAfter > div {
    width: 100%;
    background-color: white;
    position: fixed;
    bottom:0;
    background-color: #f8f8f8;
    padding: 0.37rem;
}
.bottomTypeAfterTxt {
    width: 100%;
    height: 2.19rem;
    // margin-top: 0.37rem;
    // margin-left: 3.5%;
    background-color: #fdfdfd;
    border: 0.03rem solid #eee;
    resize: none;
    font-size: 0.35rem;
    
}
.bottomTypeAfterSend {
    float: right;
    margin-top:0.2rem;
    width: 1.92rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #FE9333;
    border-radius: 0.05rem;
    text-align: center;
    font-size: 0.37rem;
    color: white;
    z-index: 5;
}
.bottomTypeAfterSend2{
    background: #BCBEC4;
}
/* 虚拟礼物 */
.xnbox{
    height:6.93rem;
    width: 100%;
    background: #fff;
    position: fixed;
    left:0;
    bottom:-16.2rem;
    z-index: 20;
    transition: all 0.5s;
}
.xnboxon{
    bottom:0rem;
}
.xntap{
    background:#F8F8F8;
}
.xntap span{
    display: inline-block;
    width: 1.07rem;
    height: 1.07rem;
    line-height: 1.07rem;
    text-align: center;
    color: #666;
    margin-left: 0.27rem;
    font-size:0.37rem;
}
.xntap span.on{
    border-bottom:0.05rem solid #F6A623;
    color:#F6A623;
}

.ulGift{
    /*display: flex;*/
    margin-top: 0.27rem;
    padding-bottom:0.27rem;
    color: #666;
    width:100%;
    height:5.87rem;
}
.liGift{
    float:left;
    width:25%;
    height:auto;
    text-align: center;
    padding-top:0.15rem;
    img{
        width:1.6rem;
        height:1.6rem;
    }
    p{
        font-size:0.32rem;
    }
}
.xncontentbox{
    position: relative;
    .bom{
        width: 100%;
        position: absolute;
        bottom: 0.7rem;
        left: 0;
        display: flex;
        justify-content:center;
    }
}




.bzdiv{
    width:4.8rem;
    height:4.8rem;
    background-size: 100% 100%;
    position: fixed;
    bottom: -4rem;
    margin-left:-2.4rem;
    left: 50%;
    margin-bottom: -2rem;
    z-index: 20;
}
.pagination-sw1,.pagination-sw2{
    position: absolute;
    left: 43.1%;
    bottom: 0;
    width: 13.8%;
}
.pagination-sw1 span ,.pagination-sw2 span{
    /*width: 0.16rem;
    height: 0.16rem;*/
    border-radius: 50%;
    margin-left: 0.19rem;
}
.pagination-sw1 .swiper-pagination-switch,.pagination-sw2 .swiper-pagination-switch{
    width: 0.16rem;
    height: 0.16rem;
    display: inline-block;
    background-color: #d8d8d8;
}
.pagination-sw1 .swiper-active-switch,.pagination-sw2 .swiper-active-switch{
    background-color: #999;
    width: 0.16rem;
    height: 0.16rem;
    display: inline-block
}
.pagination-sw1 .swiper-visible-switch,.pagination-sw2 .swiper-visible-switch{
    background-color: #999;
    width: 0.16rem;
    height: 0.16rem;
    display: inline-block
}

.movegift{
    width: 4.8rem;
    height: 4.8rem;
    background-size: 100% 100%;
    position: fixed;
    //bottom:50%;
    bottom: -4rem;
    margin-left: -2.4rem;
    left: 50%;
    margin-bottom: -2rem;
    z-index: 20;
    opacity:1;
}

.fade-enter-active{
   animation: longer 2s linear;
}
@keyframes longer {
    0%{
        bottom:-4rem;
    }
    35%{
        bottom:50%;
    }
    100%{
        bottom:50%;
        transform: scale(1.5)
    }
}
</style>
<style lang="less" >
.xncontentbox{
    position: relative;
    .bom{
        .swiper-pagination-bullet{
            width: 0.16rem;
            height: 0.16rem;
            margin-right: 0.19rem;
            background: #D8D8D8;
            border-radius: 50%;
            opacity: 1;
        }
        .swiper-pagination-bullet-active{
            background: #FE9333;
        }
    }
}
</style>
<template>
    <!--输入框组件-->
    <div>
        <!--键盘未弹出-->
        <div class="bottomType" v-show="lyk">
            <div class="bottomInput"  @click="comment">请输入留言</div>
            <a :href="mallurl+'/unsecured/mall/home?cemeteryId='+mzid+'&qrcode='+$route.query.hid" class="bottomGift" v-show="  pcorphone && productCount != 0 "><img src="../images/xnGift.png"/></a><!--电商-->
            <div class="xnGift" @click.stop="openXnGift"><img src="../images/mobileGift.png"/></div>
            <div @click="commentview()" class="bottomLy"><img src="../images/mobileLy.png"/></div><!--留言-->
        </div>
        <!--键盘弹起-->
        <div class="bottomTypeAfter" v-show="srk" @click="commentInput"  ref="qwer1">
            <div @click="commentDiv" ref="qwer">
                <textarea type="text" class="bottomTypeAfterTxt" v-model="sendcon" v-focus="abc" ></textarea>
                <div class="bottomTypeAfterSend sweepDis" @click="sendly" v-if="sendcon.length != 0">发送</div>
                <div class="bottomTypeAfterSend  bottomTypeAfterSend2 sweepDis" v-else>发送</div>
            </div>
        </div>
         <!-- 虚拟礼物 -->
        <div :class="xnGiftDiv">
            <div class="xntap">
                <span :class="a?'on':''" @click.stop="flower">鲜花</span>
                <span @click.stop="fruit" :class="!a?'on':''">水果</span>
            </div>
            <div class="xncontentbox">                            
                    <div  class="xncontent-sw1">                 
                        <swiper :options="swiperGift" class="ulGift">
                            <swiper-slide v-for=" (item,index) in xnGiftType " class="liGift">
                                    <img :src="item.src"  @click="sendGift(index)">
                                    <p>{{item.name}}</p>                                                                   
                            </swiper-slide>
                        </swiper>
                        <div class="bom">
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
            </div>		
        </div>
        <!-- <transition name="fade"> -->
        <img :src="movegift" :class="movegiftclass" >
        <!-- </transition>     -->
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import { focus } from 'vue-focus'
    import { mapState } from 'vuex'
    import global from '../config/global'
    export default {
		data() {
			return {
				imgarr:{
					"hid":"375"
				},
                abc:false,
                staticimg:global.staticimg,
                imgurl:global.imgurl,
                staticimg:global.staticimg,
                mallurl:global.mallurl,
                host:global.host,
                xnGift:{
                    xh:[
                        {name:"无尽思念",src:require('../images/XH1.png')},                        
                        {name:"一路走好",src:require('../images/XH2.png')},                        
                        {name:"悠悠回忆",src:require('../images/XH3.png')},                        
                        {name:"追忆难忘",src:require('../images/XH4.png')},
                        {name:"深切思念",src:require('../images/XH9.png')},                        
                        {name:"白色思念",src:require('../images/XH10.png')},                        
                        {name:"永远怀念",src:require('../images/XH11.png')},                        
                        {name:"深情怀念",src:require('../images/XH12.png')}, 
                        {name:"感今思昔",src:require('../images/XH5.png')},                        
                        {name:"举踵思望",src:require('../images/XH6.png')},                        
                        {name:"众人痛心",src:require('../images/XH7.png')},                        
                        {name:"深切缅怀",src:require('../images/XH8.png')},
                        {name:"驾鹤西游",src:require('../images/XH13.png')},                        
                        {name:"沉痛告别",src:require('../images/XH14.png')},                        
                        {name:"流芳千古",src:require('../images/XH15.png')},                        
                        {name:"浩气长存",src:require('../images/XH16.png')},                        
                    ],
                    sg:[
                        {name:"万事吉利",src:require('../images/SG1.png')},                        
                        {name:"祈祝好运",src:require('../images/SG2.png')},                        
                        {name:"人丁兴旺",src:require('../images/SG3.png')},                        
                        {name:"岁岁平安",src:require('../images/SG4.png')},                        
                        {name:"幸福美满",src:require('../images/SG5.png')},                        
                        {name:"事事如意",src:require('../images/SG6.png')},                        
                        {name:"吉祥如意",src:require('../images/SG7.png')},                        
                        {name:"福禄寿禧",src:require('../images/SG8.png')},                        
                
                    ]
                },
                lyk:true,
                srk:false,
                swiperGift: {				
                    slidesPerView: 4,
                    slidesPerColumn: 2,
                    slidesPerColumnFill : 'row',
                    pagination :'.swiper-pagination',  
				},
                swiperGift2: {
                    slidesPerView: 4,
                    slidesPerColumn: 2,
				},
                
                xnGiftType:"",
                a:true,
                movegift:"",//发出礼物路径
                movegiftclass:"movegift",
                faded:true,
                hid:"",
                sendcon:"",//留言发送内容
                videoflag:!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
			}
		},
        components: {
			swiper, swiperSlide
		},
        directives: { focus: focus },
        props: {
            title: {
                type: String,
                default: 'className'
            },
            xnGiftDiv:"",
            mzid:"",//墓主ID
            productCount:"",//商城是否存在
            cemeteryId:"",
        },
        created() {
			this.ajax();
            this.getdata();
            this.browserRedirect();
		},
		methods:{
            getdata(){
                this.hid = this.$route.query.hid;
            },
            // 底部输入点击显示遮罩层
            comment:function(){
                this.lyk = false;
                this.srk = true;     
                this.abc=true;                    
                if(this.videoflag){
                    document.body.scrollTop= document.body.offsetHeight                    
                }
            },
            // 关闭输入框遮罩层
            commentInput:function(){
                this.lyk = true;
                this.srk = false;
            },
            //阻止事件冒泡
            commentDiv:function(event){
                event.stopPropagation();
                event.preventDefault()
            },
            //虚拟礼物开启
            openXnGift:function(){
                this.$emit("xnGiftDivFN","xnbox xnboxon");       
            },
            ajax(){
                this.xnGiftType=this.xnGift.xh; 
                this.movegift=this.xnGiftType[0].src;               
            },
            flower(){
                this.a=true;
                this.xnGiftType = this.xnGift.xh;
            },
            fruit(){
                this.a=false;
                this.xnGiftType = this.xnGift.sg;
            },
            sendGift(index){
                var this_=this;
                this.movegift=this.xnGiftType[index].src;
                this.faded = false;
                this.$emit("xnGiftDivFN","xnbox"); //关闭虚拟礼物       
                this.movegiftclass=" movegift fade-enter-active";
                //图片动画效果
                setTimeout(function () {
                    this_.movegiftclass=" movegift";
                },2000)
            },
            sendly(){//发送留言
                if( !this.sendcon ){
                    alert("留言不能为空");

                }else{
                    this.lyk = true;
                    this.srk = false;
                    this.$http.post(global.host+"/cemeterySweep/insert",{"content":this.sendcon,'cemeteryId':this.mzid})
					.then((response) => {                      
                        if(response.body.status == 0){
                            alert(response.body.message);
                        }else if(response.body.status == 1){    
                            this.sendcon="";		
                            this.$loading.showPopTwo(response.body.message,require('../images/phone-popIcon2.png'));	
                            setTimeout(() => {
                                this.$loading.hidePopTwo();								
                            }, 2000);           
                        }else if(response.body.status == 2){
                            this.$loading.showPopTwo(response.body.message,require('../images/phone-popIcon3.png'));	
                            setTimeout(() => {
                                this.$loading.hidePopTwo();								
                            }, 2000);                            
                        }                       
					})
					.catch(function (response) {
                        
					})
                }
									
                      
            },
            browserRedirect() {	//判断PC或者Phone
				var result = 0;
				var sUserAgent = navigator.userAgent.toLowerCase();
				var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
				var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
				var bIsMidp = sUserAgent.match(/midp/i) == "midp";
				var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
				var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
				var bIsAndroid = sUserAgent.match(/android/i) == "android";
				var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
				var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
				if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {				
					this.pcorphone =  1;//手机
				} else {				
					this.pcorphone =  0;//PC
				}				
			},
            commentview(){//跳转到留言页面
                sessionStorage.setItem('isBack',10);
                this.$router.push({ path: '/comment',query:{"cemeteryId":this.mzid}});
            }
		}
    }
</script>